<template>
  <div>
    <div class="container">
      <!-- 条件查询 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="笔迹特征名" >
          <el-input v-model="featureQuery.featureName" placeholder="请输入笔迹特征名"></el-input>
        </el-form-item>
        <el-form-item label="激活状态" >
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-select v-model="featureQuery.status" placeholder="请选择激活状态">
            <el-option label="未激活" :value="0"></el-option>
            <el-option label="已激活" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFeaInfo()">搜索</el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
        </el-form-item>
      </el-form>


      <el-table
          :data="tableData"
          border
          class="table"
          header-cell-class-name="table-header"
      >
        <el-table-column prop="date"
                         label="序号"
                         width="50"
                         align="center">
          <!--计算得出序号-->
          <template #default="scope">
            {{ (query.pageIndex - 1) * query.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <!--不显示特征id-->
<!--        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>-->
        <el-table-column prop="featureName" label="字迹特征名" align="center" width="200"></el-table-column>
        <el-table-column prop="gmtCreate" label="修改时间" width="200" align="center"></el-table-column>
        <el-table-column prop="status" label="激活状态" width="250" align="center">
          <template #default="scope">
            <el-switch active-color="#ff4949"
                       v-model="scope.row.status"
                       :active-value="1"
                       :inactive-value="0" @change="prohibitFeature(scope.row.id, scope.row.status)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="备注" align="center"></el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import feature from "../../api/admin/admin";

export default {
  data() {
    return {
      query: {
        feature:{
        },
        pageIndex: 1,
        pageSize: 8,
        key:"",
        value:""
      },
      // 查询条件
      featureQuery: {
        featureName: '',
        status: null,
      },
      tableData: [],
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1
    };
  },
  created() {
    this.getData();
  },
  methods: {

    // 获取 easy-mock 的模拟数据
    getData() {
      feature.getFeature(this.query.pageIndex,this.query.pageSize,this.query.feature).then(res => {
        console.log(res);
        this.tableData = res.data.item.records;
        this.pageTotal = res.data.item.total;
      });
    },
    searchFeaInfo(pageIndex = 1) {
      this.query.pageIndex = pageIndex
      feature.searchFeaInfo(this.query.pageIndex, this.query.pageSize, this.featureQuery)
          .then((response) => {
            this.tableData = response.data.item.records;
            this.pageTotal = response.data.item.total;
          }).catch(error => {
        console.log(error);
        this.$message({
          type: 'error',
          message: '获取特征信息失败'
        })
      })
    },
    // 封禁或激活特征
    prohibitFeature(id, status) {
      status = !status;
      let s = 0
      if (status) {
        s = 1
      } else {
        s = 0
      }
      feature.prohibitFeature(id, s).then(response => {
        let msg = ""
        if (status) {
          msg = "封禁成功"
        } else {
          msg = "激活成功"
        }
        this.$message({
          type: 'success',
          message: msg,
        })
        return response;
      }).catch(response => {
        console.log(response.message)
        this.$message({
          type: 'error',
          message: "操作失败",
        })
      })
    },

    // 重置搜索栏
    resetData() {
      this.featureQuery.featureName = null;
      this.featureQuery.status = null;
    },
    // 分页导航
    handlePageChange(val) {
      console.log("val=="+val);
      this.query.pageIndex=val;
      this.getData(this.query.log,this.query.pageIndex,this.query.pageSize);
    }
  }
};
</script>

<style scoped>
.container {
  /*边界 20px*/
  margin: 20px;
}
.table {
  width: 100%;
  font-size: 14px;
}
</style>
